<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud ref="crudRef" :columns="columns" :options="options">
      <!--   昵称   -->
      <template #nickname="{record}">
        <a-avatar>
          <img
              :src="record.avatar"
              alt="avatar"
          />
        </a-avatar>
        {{ record.nickname }}
      </template>
      <!--   处理状态   -->
      <template #status="{record}">
        <!--    如果是审核不通过状态，则显示原因    -->
        <template v-if="record.status === 255">
          <a-popover>
            <template #content>
              {{ record.reason }}
            </template>
            <a-tag color="red">{{ record.status_desc }}</a-tag>
          </a-popover>
        </template>
        <!--    如果是待处理状态，则显示主题色tag    -->
        <template v-if="record.status === 0">
          <a-tag color="blue">{{ record.status_desc }}</a-tag>
        </template>
        <!--    如果是审核通过状态，则显示成功色tag    -->
        <template v-if="record.status === 200">
          <a-tag color="green">{{ record.status_desc }}</a-tag>
        </template>
      </template>

      <!--   列表操作   -->
      <template #operationAfterExtend="{ record }">
        <a-button v-if="record.status!==200" type="text" @click="auditRecord(record)">审核</a-button>
      </template>
    </ma-crud>
    <!-- 审核弹框 -->
    <a-modal v-model:visible="showAuditForm" :default-visible="false" :footer="false">
      <audit :record="curAuditRecord" @success="auditSuccess"></audit>
    </a-modal>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue'
import wxcSharerForm from '@/api/wxc/wxcSharerForm'
import {useSiteStore} from "@/store/index.js";
import Audit from "@/views/wxc/sharerForm/components/audit.vue";

const crudRef = ref()
const siteStore = useSiteStore()
const showAuditForm = ref(false)
const curAuditRecord = ref({})


const options = reactive({
  id: 'wxc_sharer_form',
  rowSelection: {
    showCheckedAll: false
  },
  pk: 'form_id',
  operationColumn: true,
  operationColumnWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  // 设置前置请求
  beforeRequest: params => {
    params.orderBy = 'form_id'
    params.orderType = 'desc'
  },
  api: wxcSharerForm.getList,
})

const columns = reactive([
  {
    title: "申请单ID",
    dataIndex: "form_id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入申请单ID"
    }
  },
  {
    title: "申请店铺",
    dataIndex: "shop_id",
    formType: "select",
    search: true,
    dict: {
      data: () => siteStore.fetchShopDict(),
      translation: true
    },
    editDisabled: true,
  },
  {
    title: "申请人",
    dataIndex: "nickname",
    formType: "input",
    search: true,
    editDisabled: true,
  },
  {
    title: "手机号码",
    dataIndex: "mobile_number",
    formType: "input",
    search: true,
    editDisabled: true,
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请设置状态"
    },
    dict: {
      // 指定字典名称
      name: 'sharer_form_status',
      // 设置解析数据的label 和 value
      props: {label: 'title', value: 'key'},
      // 对数据进行字典翻译
      translation: true
    }
  },
  {
    title: "原因",
    dataIndex: "reason",
    formType: "textarea",
    hide: true,
    search: false,
    placeholder: "请输入审核不通过的原因",
  },
  {
    title: "申请时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入提交时间"
    },
    showTime: true
  }
])

const auditRecord = (record) => {
  showAuditForm.value = true
  curAuditRecord.value = record
}

const auditSuccess = () => {
  showAuditForm.value = false
  crudRef.value.refresh()
}

</script>
<script> export default {name: 'wxc:sharerForm'} </script>